<template>
	<view class="add-box">
		<view class="tips">
			请绑定持卡人本人的银行卡
		</view>
		<view class="from">
			<view class="col">
				<view class="col-1">
					持卡人
				</view>
				<view class="col-2">
					<input class="uni-input cl-input" v-model="card_name" placeholder="持卡人" />
				</view>
			</view>
			<view class="col">
				<view class="col-1">
					卡号
				</view>
				<view class="col-2">
					<input class="uni-input cl-input" v-model="bank_num" placeholder="卡号" />
				</view>
			</view>
			<view class="col">
				<view class="col-1">
					支付密码
				</view>
				<view class="col-2">
					<input class="uni-input cl-input" v-model="pay_pwd" placeholder="支付密码" />
				</view>
			</view>
			<view class="col">
				<view class="col-1">
					开户行
				</view>
				<view class="col-2">
					<input class="uni-input cl-input" v-model="bank_name" placeholder="开户行" />
				</view>
			</view>
<!-- 			<view class="col">
				<view class="col-1">
					所在地
				</view>
				<view class="col-2">
					天津,河东区
				</view>
				<view class="col-3">
					>
				</view>
			</view> -->
			<view class="col">
				<view class="col-1">
					开户支行
				</view>
				<view class="col-2">
					<input class="uni-input cl-input" v-model="bank_sub_name" placeholder="开户支行" />
				</view>
			</view>
		</view>
		<view class="button" @click="sub">
			<text>确定绑定</text>
		</view>
	</view>
</template>

<script>
	import request from '@/api/request.js';
	export default {
		data(){
			return {
				card_name :'',// 持卡人
				bank_num : '', // 卡号
				bank_sub_name : '', // 开户支行
				bank_name : '', // 开户行
				pay_pwd : '', // 支付密码
				isEdit : 0,
			}
		},
		onLoad(option) {
			let bankCardData = JSON.parse(option.bankCardData);
			this.isEdit = Number(option.edit);
			if(bankCardData.bank_num) {
				this.card_name = bankCardData.card_name;
				this.bank_num = bankCardData.bank_num;
				this.bank_sub_name = bankCardData.bank_sub_name;
				this.bank_name = bankCardData.bank_name;
				this.pay_pwd = '';
			}
		},
		onShow() {
			// 设置导航栏颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
			    backgroundColor: this.$store.state.presentColor
			});
		},
		methods : {
			async sub(){
				if(this.card_name == '' || this.bank_num == '' || this.bank_sub_name == '' || this.bank_name == '' || this.pay_pwd == ''){
					uni.showToast({
						title: '请填写完整',
						duration: 2000,
						icon:"none"
					});
					return;
				}
				let url = '';
				if(this.isEdit === 1){
					url = '/api/user/editCard';
				}else {
					url = '/api/User/addCard';
				}
				let data = await request.post(url,{
					card_name : this.card_name,
					bank_num : this.bank_num,
					bank_sub_name :this.bank_sub_name,
					bank_name :this.bank_name,
					pay_pwd :this.pay_pwd,
				});
				if(data.code === 1){
					uni.showToast({
						title: data.msg,
						duration: 2000,
						icon:'none'
					});
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-box {
		padding: 0rpx 20rpx;
		.tips {
			padding: 20rpx 0rpx;
			font-size: 20rpx;
			color: #999999;
		}
		.from {
			padding: 20rpx 40rpx;
			background-color: white;
			border-radius: 10rpx;
			.col {
				display: flex;
				height: 120rpx;
				align-items: center;
				.col-1 {
					width: 180rpx;
					text-align: left;
				}
				.col-2 {
					flex: 1;
					.cl-input {
						width: 100%;
					}
				}
				.col-3 {
					color: #999999;
					font-size: 28rpx
				}
			}
		}
		.button {
			height: 100rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(#e0bc84, #d5a96e);
			color: white;
			border-radius: 10rpx;
		}
	}
</style>